<!-- /*
 * @Author: 俞明月
 * @Date:   2022-01-30
 * @Last Modified by:   俞明月
 * @Last Modified time: 2022-01-30
 */ -->
<template>
	<div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">我的优惠券</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1 flex-col" ref="scrollPage">
            <div class="ui-mode-content flex1 flex-col" style="margin-top:0.42rem">
                <div class="mt-tab-item flex-row align-stretch">
                    <a href="javascript:;" 
                        class="flex1"
                        v-for="(item,i) in getMenuList"
                        :key="i"
                        :class="{current:item.actived}"
                        @click="handleChangeTab(item)" 
                    >
                        {{item.title}}
                    </a>
                </div>
                <div class="mt-tab-content relative flex1">
                    <template>
                        <inner-couponlist ref="couponList" :is_online="$route.query.is_online"></inner-couponlist>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import innerCouponlist from './list/couponList';
export default {
    name: 'my/coupon',
    data() {
        return {
            public_agent_info:{},
            public_user_info:{},
            menu:[
                {
                    flag:false,
                    title:'未使用',
                    is_online:0,
                },
                {
                    flag:false,
                    title:'已使用',
                    is_online:1
                },
                {
                    flag:false,
                    title:'已过期',
                    is_online:2
                }
            ]
        }
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    components:{
        innerCouponlist
    },
    computed:{
        getMenuList(){
            return this.menu.map(item=>{
				let flag=(this.$route.query.is_online==item.is_online)
                item.actived=flag;
                return item;
            });
        }
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init); 
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.$nextTick(()=>{
                if(!this.$route.query.is_online){
                    this.$router.replace({
                        path:'/my/coupon',
                        query:{
                            orderId:this.$route.query.orderId,
                            payway:this.$route.query.payway,
                            is_online:this.menu[0].is_online
                        }
                    });
                }
            });
        },
        // 切换选中顶部菜单
        handleChangeTab(item) {
            if(!item.actived){
                this.$router.replace({
                    path:'/my/coupon',
                    query:{
                        orderId:this.$route.query.orderId,
                        payway:this.$route.query.payway,
                        is_online:item.is_online
                    }
                });
            };
        }
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt-tab-item {
    padding: 0 2rem;
    height: 2.6rem;
    line-height: 2.6rem;
    position: relative;
    border-bottom: solid 1px #eee;
    a{
        color: #4a4a4a;
        cursor: pointer;
        position: relative;
        display: block;
        text-align: center;
        font-size: 0.9rem;
        &.current {
            color: #3bce63;
        }
        &.current:after {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            bottom: -1px;
            height: 0.2rem;
            border-radius: 0.3rem;
            background: -moz-linear-gradient(left, #81c132 0%, #2ed06c 100%);
            background: -webkit-gradient(linear, left center, right center, color-stop(0%,#81c132), color-stop(100%,#2ed06c));
            background: -webkit-linear-gradient(left, #81c132 0%,#2ed06c 100%);
            background: -o-linear-gradient(left, #81c132 0%,#2ed06c 100%);
            background: -ms-linear-gradient(left, #81c132 0%,#2ed06c 100%);
            background: linear-gradient(to right, #81c132 0%,#2ed06c 100%);
        }
    }
}
</style>